<template>
  <div class="header-container">
    <!-- 日期时间显示区域 -->
    <div class="header-date">
      <!-- 显示格式化的日期和时间 -->
      <span class="date-time">{{ dateTimeStr }}</span>
      <!-- 显示当前星期几 -->
      <span class="date-weekday">{{ weekdayStr }}</span>
    </div>
    <div class="header-tools">
      <div class="tools-home icon-wrapper" @click="goHome">
        <div class="icon">
          <IconFont name="home" size="1.4583vw" />
        </div>
        <div class="tooltip">默认视角</div>
      </div>
      <div class="tools-big icon-wrapper" @click="toggleFullScreen">
        <div class="icon">
          <IconFont :name="isFullScreen ? 'tuichuquanping' : 'quanping'" size="1.3542vw" />
        </div>
        <div class="tooltip">{{ isFullScreen ? '退出全屏' : '全屏' }}</div>
      </div>
      <div class="tools-shezhi icon-wrapper" @click="">
        <div class="icon">
          <IconFont name="shezhi" size="1.4583vw" />
        </div>
        <div class="tooltip">设置</div>
      </div>
      <div class="tools-tuichu icon-wrapper" @click="">
        <div class="icon">
          <IconFont name="tuichu" size="1.4583vw" />
        </div>
        <div class="tooltip">退出</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { getobjm } from '../../utils/getobjm'
const objm = getobjm()
// 创建响应式变量，用于存储格式化后的日期时间字符串
const dateTimeStr = ref('') // 时间字符串，格式为 YYYY/MM/DD HH:MM:SS
const weekdayStr = ref('') // 星期几字符串
const isFullScreen = ref(false) // 跟踪全屏状态
// 定义星期几的中文表示数组，索引对应Date.getDay()返回值(0-6)
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
// 初始化计时器变量为null，表示尚未创建计时器
let timer = null
/**
 * 更新日期和时间的函数
 * 获取当前时间，格式化为所需字符串，并更新响应式变量
 */
const updateDateTime = () => {
  // 获取当前日期时间
  const now = new Date()
  // 格式化年、月、日、时、分、秒
  // padStart(2, '0')确保数字始终是两位数，不足则在前面补0
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0') // 月份从0开始，需要+1
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  // 组合成完整的日期时间字符串并更新响应式变量
  dateTimeStr.value = `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`
  // 根据当前是星期几(0-6)，从weekdays数组中获取对应的中文表示
  weekdayStr.value = weekdays[now.getDay()]
}

/**
 * 切换全屏状态的函数
 */
const toggleFullScreen = () => {
  // document.fullscreenElement 是一个只读属性，它返回当前在全屏模式下显示的元素。
  // 如果没有元素处于全屏状态，则返回 null。
  if (!document.fullscreenElement) {
    // 如果当前不是全屏状态，则请求全屏 document.documentElement.requestFullscreen()
    document.documentElement
      .requestFullscreen()
      .then(() => {
        isFullScreen.value = true
      })
      .catch((err) => {
        console.error(`全屏请求失败: ${err.message}`)
      })
  } else {
    // 如果当前是全屏状态，则退出全屏  document.exitFullscreen()
    document
      .exitFullscreen()
      .then(() => {
        isFullScreen.value = false
      })
      .catch((err) => {
        console.error(`退出全屏失败: ${err.message}`)
      })
  }
}

const goHome = () => {
  //默认飞入点  (重庆 来福士)
  objm.activeViewer.flyIn(
    [106.62672254553621, 29.572460283514193, 3073.8116032563867],
    [258.5919406761868, -27.42679133546573, 0.00013239674423600495],
    3,
  )
}
// 监听全屏状态变化
const handleFullScreenChange = () => {
  isFullScreen.value = !!document.fullscreenElement
}

// 组件挂载完成后的生命周期钩子
onMounted(() => {
  // 立即执行一次更新，确保页面加载后立即显示时间
  updateDateTime()
  // 设置每秒执行一次的定时器，实现时钟效果
  // 将定时器ID保存到timer变量，以便在组件卸载时清除
  timer = setInterval(updateDateTime, 1000) // 1000毫秒 = 1秒

  // 添加全屏状态变化的事件监听器
  document.addEventListener('fullscreenchange', handleFullScreenChange)
})

// 组件卸载前的生命周期钩子
onUnmounted(() => {
  // 清除定时器，防止内存泄漏
  clearInterval(timer)
  // 将timer重置为null，表示定时器已被清除
  timer = null
  // 移除全屏状态变化的事件监听器
  document.removeEventListener('fullscreenchange', handleFullScreenChange)
})
</script>

<style lang="scss" scoped>
.header-container {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 5.9896vw /* 115px -> 5.9896vw */;
  overflow: hidden;
  background-image: url('@/assets/images/header/head-title.png'); // 背景图片
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  //顶部日期
  .header-date {
    position: absolute;
    top: 2.0833vw /* 40px -> 2.0833vw */;
    left: 4.0104vw /* 77px -> 4.0104vw */;
    display: flex; // 使用弹性布局
    gap: 0.7813vw /* 15px -> .7813vw */;
    font-size: 1.0417vw /* 20px -> 1.0417vw */;
    font-weight: bold;
    color: #2ac8fb; // 青色文字
    text-shadow: 0 0 0.2604vw /* 5px -> .2604vw */ rgba(42, 200, 251, 0.7); // 文字阴影
  }
  //顶部工具
  .header-tools {
    position: absolute;
    top: 2.0833vw /* 40px -> 2.0833vw */;
    right: 0.7813vw /* 15px -> .7813vw */;
    width: 10.4167vw /* 200px -> 10.4167vw */;
    height: 1.875vw /* 36px -> 1.875vw */;
    border: 0.1042vw /* 2px -> .1042vw */ solid #2ac8fb;
    border-radius: 0.2604vw /* 5px -> .2604vw */;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    .icon-wrapper {
      position: relative;
      .icon {
        cursor: pointer;
      }
      .tooltip {
        position: absolute;
        top: 150%;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.7);
        color: #ffffff;
        padding: 0.2604vw 0.5208vw;
        border-radius: 0.2604vw;
        font-size: 0.7292vw;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.3s,
          visibility 0.3s;
        border: 0.0521vw /* 1px -> .0521vw */ solid #2ac8fb;
        z-index: 10;
        cursor: pointer;
      }
      &:hover .tooltip {
        opacity: 1;
        visibility: visible;
      }
    }
  }
}
</style>
